<template>
	
	<view class="header t-flex between bgf p30">
		<view class="search t-flex between">
			<text class="iconfont icon-sousuo"></text>
			<input type="text" placeholder="搜索" class="input " v-model="keyword" @confirm="realodData()" />
		</view>
		
		<picker mode="region"  @change="changeArea">
			<view class="select">
				{{area.name}} <text class="iconfont icon-sanjiaoxia c9"></text>
			</view>
		</picker>
		
		
		
	</view>
	
	<view class="container pl30 pr30">
		<worker v-for="item in data" :key="item.id" :data="item" @click="$go('/pages/worker/detail?id='+item.user_id)"></worker>
		<view class="t-flex center f26  c6 pt20 pb20" v-if="data.length">
			{{loading?'正在获取更多...':"没有更多了..."}}
		</view>
		<empty msg="该区县暂无相关师傅" v-if="!data.length"></empty>
	</view>
	<view class="bpad"></view>
	
	
	<contact></contact>
	
	
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad,onPullDownRefresh,onReachBottom,onUnload} from "@dcloudio/uni-app"
import { showToast, usePaging } from '../../lib/ts/util';
import { useStore } from '../../store';
import { cityDetail } from '../../api';


	const store = useStore()

	const {
		data,
		reload,
		getMore,
		loading
	} = usePaging('/api/homeinfo/SfList')
	
	
	
	let area = ref({})
	let keyword = ref('')
	onLoad(()=>{
		realodData()
	})
	onPullDownRefresh(()=>{
		keyword.value = ''
		realodData()
	})
	onReachBottom(()=>{
		getMore({
			keywords:keyword.value,
			area_id:area.value.id,
		})
	})
	onUnload(()=>{
		uni.$off('locationUpdate')
	})
	uni.$on('locationUpdate',()=>{
		area.value = {
			name:store.district,
			id:store.area_id
		}
		realodData()
	})
	area.value = {
		name:store.district,
		id:store.area_id
	}
	
	const realodData = ()=>{
		reload({
			keywords:keyword.value,
			area_id:area.value.id,
		})
	}
	
	const changeArea = async (e)=>{
		let res = await cityDetail(e.detail.value[2])
		if(res){
			area.value = res
		}else{
			showToast('发生了一个错误')
		}
		realodData()
	}
	

</script>

<style scoped lang="scss">
	.search{
		width: 498rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 40rpx;
		padding-left: 26rpx;
		.input{
			width: calc(100% - 1em);
			padding-left: 20rpx;
		}
	}
	.header{
		position: sticky;
		top: 0;
		z-index: 3;
	}
	
	
	
</style>
